<template>
    <BaiduMapDialog ref="bMapDialog" v-on:mClick="mClick" :sure-click="sureClick" v-on:ready="mapReady">

        <el-input v-model="mapAddress" placeholder="输入关键字定位">
            <el-button slot="append"
                       @click="locateAddress">搜索</el-button>
        </el-input>
    </BaiduMapDialog>
</template>

<script>
    /**
     * 地图选点弹窗
     */
    import BaiduMapDialog from './BaiduMapDialog.vue'

    export default {
        name: "BaiduMapLocationDialog",
        components:{BaiduMapDialog},
        props:{
            // 经度初始值
            longitude: {
                type: Number
            },
            // 纬度初始值
            latitude: {
                type: Number
            }
        },
        data(){
            return {
                // 搜索字符串
                mapAddress: null,
                // 地图经纬度选择用
                mapPoint:null,
                localLongitude: this.longitude,
                localLatitude: this.latitude
            }
        },
        mounted(){

        },
        methods:{
            show(longitude,latitude) {
                this.localLongitude = longitude || null
                this.localLatitude = latitude || null
                this.location(this.localLongitude,this.localLatitude)
                this.$refs.bMapDialog.show()
            },
            locateAddress(){
                let bdMapCom = this.$refs.bMapDialog.getBaiduMap()
                bdMapCom.clearOverlays()
                bdMapCom.getPoint(this.mapAddress,(point)=>{
                    if (point) {
                        bdMapCom.centerAndZoom(point)
                        bdMapCom.addMarker(point)

                        this.mapPoint = point
                    }else{
                        this.$message.error("您选择地址没有解析到结果!");
                    }
                })

            },
            mClick(e){
                let bdMapCom = this.$refs.bMapDialog.getBaiduMap()
                bdMapCom.clearOverlays()
                bdMapCom.getAddress(e.point,(addr,rs)=>{
                    this.mapAddress = addr.join(' ')
                    bdMapCom.addMarker(e.point)
                    this.mapPoint = e.point
                })
            },
            sureClick(){
                if(!this.mapPoint){
                    this.$message.error('请先定位一个位置')
                    return false
                }
                let latitude = this.mapPoint.lat
                let longitude = this.mapPoint.lng
                this.$emit('selectLocation',{latitude,longitude})
                return true
            },
            // 发现在容器show的时候地图刚刚进行初始化，容易造成获取不到地图对象，这里进行初始化
            mapReady(){
                this.location(this.localLongitude,this.localLatitude)
            },
            // 根据经纬度回显到地图上
            location(longitude,latitude){
                let bdMapCom = this.$refs.bMapDialog.getBaiduMap()
                if(longitude && latitude && bdMapCom){
                    let point = bdMapCom.newPoint(longitude,latitude)
                    bdMapCom.getAddress(point,(addr,rs)=>{
                        this.mapAddress = addr.join(' ')
                        bdMapCom.centerAndZoom(point)
                        bdMapCom.addMarker(point)
                        this.mapPoint = point
                    })

                }
            }
        },
        watch:{
            longitude(val) {
                this.localLongitude = val
                this.location(this.localLongitude,this.localLatitude)
            },
            latitude(val) {
                this.localLatitude = val
                this.location(this.localLongitude,this.localLatitude)
            }
        }
    }
</script>

<style scoped>

</style>